<template>
<view class="d-input flex flex-row align-center">
  <view class="flex-shrink-0">
    <slot name="prefix"></slot>
  </view>
  <input class="flex-grow-1 d-input__main" placeholder-class="d-input-placeholder" v-model="inputVal" :placeholder="props.placeholder" />
  <view class="flex-shrink-0">
    <slot name="suffix"></slot>
  </view>
</view>
</template>

<script setup lang="ts">
import {DInputProps} from "@/components/DInput/dInput";

defineOptions({ name: 'DInput' })


const inputVal = defineModel<string | null>();
const $attrs = useAttrs()

const props = defineProps(DInputProps)
</script>

<style scoped lang="scss">
.d-input {
  height: 42px;
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.2);
  //border: 2rpx solid rgba(255, 255, 255, 1);
  padding: 0 28rpx 0 32rpx;
}

.d-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
</style>
